<template>
  <div class="dropdown" ref="dropdownRef">
    <div @click.prevent="toggleOpen">
      <slot name="label"></slot>
    </div>
    <!-- 点击隐藏 -->
    <!-- <ul
      class="dropdown-menu"
      :style="{ display: 'block'}"
      v-if="isOpen"
    > -->
    <ul
      class="dropdown-menu"
    >
      <slot></slot>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
// 点击隐藏
// import useClickOutside from '@/hooks/useClickOutside'

export default defineComponent({
  name: 'Dropdown',
  props: {
    // title: {
    //   type: String,
    //   required: true
    // }
  },
  setup () {
    // const isOpen = ref(false)
    const dropdownRef = ref<null | HTMLElement>(null)
    // 显示隐藏 dropdown
    const toggleOpen = () => {
      // isOpen.value = !isOpen.value
    }
    // const isClickOutside = useClickOutside(dropdownRef)

    // watch(isClickOutside, () => {
    //   if (isOpen.value && isClickOutside.value) {
    //     isOpen.value = false
    //   }
    // })

    return {
      // isOpen,
      toggleOpen,
      dropdownRef
    }
  }
})
</script>

<style scoped>
.dropdown {
  position: relative;
}
.dropdown .dropdown-menu {
    /* min-width: 8rem; */
    position: absolute;
    display: none;
    height: auto!important;
    box-sizing: border-box;
    /* max-height: calc(100vh - 2.7rem); */
    overflow-y: auto;
    position: absolute;
    top: 120%;
    right: -20px;
    background-color: #fff;
    padding: .6rem 0;
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 20%);
    text-align: left;
    border-radius: .25rem;
    white-space: nowrap;
    margin: 0;
}
</style>
